import React, { PureComponent }  from 'react';
import Link from 'umi/link';
import { connect } from 'dva';

import { Row, Col, Card, Menu, Icon, Tabs} from 'antd';

import { getMenuData } from '../common/menu';
import styles from './PageHeaderLayout.less';


const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const { TabPane } = Tabs;


@connect(state => ({
  user_role: state.global.user_role,
}))
export default  class  PageSystemLayout extends PureComponent {
  constructor(props) {
    super(props);
    // 把一级 Layout 的 children 作为菜单项
    this.menus = getMenuData().filter(item => item.name=='系统设置').reduce((arr, current) =>
      arr.concat(current.children), []);
  }


  getNavMenuItems(menusData, parentPath = '') {
    const { user_role } =  this.props;

    // const UserRole = getUserRole(user_role);


    if (!menusData) {
      return [];
    }
    return menusData.filter(item => item.hideInMenu!=true).map((item) => {
      if (!item.name) {
        return null;
      }
      let itemPath;
      if (item.path.indexOf('http') === 0) {
        itemPath = item.path;
      } else {
        itemPath = `${parentPath}/${item.path || ''}`.replace(/\/+/g, '/');
      }
      if (item.children && item.children.some(child => child.name)) {
        return (
          <MenuItemGroup
            title={
              item.icon ? (
                <span>
                <Icon type={item.icon} />
                <span >{item.name}</span>
              </span>
              ) : item.name
            }
            key={item.key || item.path}
          >

            {this.getNavMenuItems(item.children, itemPath)}
          </MenuItemGroup>
        );
      }
      const icon = item.icon && <Icon type={item.icon} />;

      // console.log(item.roleAuthority);
      // console.log(user_role);
      //
      // console.log(UserRole[item.roleAuthority]);
//(item.roleAuthority==undefined || getUserRole(user_role,item.roleAuthority) ) && <Menu.Item   key={item.key || item.path}>
      return (
        (item.roleAuthority==undefined  ) && <Menu.Item   key={item.key || item.path}>
          {
            /^https?:\/\//.test(itemPath) ? (
              <a href={"/"+item.path} target={item.target}>
                {icon}<span>{item.name}</span>
              </a>
            ) : (
              <Link to={"/"+item.path} target={item.target}>
                {icon}<span>{item.name}</span>
              </Link>
            )
          }
        </Menu.Item>
      );
    });
  }

  getCurrentMenuSelectedKeys(props) {
    const { location: { pathname } } = props || this.props;
    const keys = pathname.split('/').slice(1);
    if (keys.length === 1 && keys[0] === '') {
      return [this.menus[0].key];
    }else{
      return [keys[2]];// 修改为第一个字节
    }
  }



  render(){
    const { children, wrapperClassName, user_role, location, dispatch, tabList, title,tabActiveKey, onTabChange, ...restProps} = this.props;

    const screenHeight=document.documentElement.clientHeight-180 || document.body.clientHeight-180;

    let tabDefaultValue;
    if (tabActiveKey !== undefined && tabList) {
      tabDefaultValue = tabList.filter(item => item.default)[0] || tabList[0];
    }
    const activeKeyProps = {
      defaultActiveKey: tabDefaultValue && tabDefaultValue.key,
    };
    if (tabActiveKey !== undefined) {
      activeKeyProps.activeKey = tabActiveKey;
    }

    return (

        <Row gutter={24}>
          <Col span={5}  className={styles.system_card}>
            <Card
            >
              <Menu
                style={{height:'100%'}}
                selectedKeys={this.getCurrentMenuSelectedKeys()}
                mode="inline"
              >
                {this.getNavMenuItems(this.menus)}
              </Menu>
            </Card>


          </Col>
          <Col span={19} className={styles.system_card}>
            <Card
              title = {<div className={styles.system_card_header}>
                <h3>{title}</h3>
                {
                  tabList &&
                  tabList.length && (
                    <Tabs
                      // className={styles.tabs}
                       {...activeKeyProps}
                       onChange={onTabChange}
                      // tabBarExtraContent={tabBarExtraContent}
                    >
                      {
                        tabList.map(item => <TabPane tab={item.tab} key={item.key} />)
                      }
                    </Tabs>
                  )
                }
              </div>}
              bodyStyle={{padding:'0 0 50px 0'}}
              {...restProps}
            >


              {children ? <div className={styles.content}>{children}</div> : null}
            </Card>

          </Col>
        </Row>

    );
  }

}

